<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国石油客户端下载</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <style>
    html,
    body {
        background: #f9faff;
    }
    
    .m-index .pic img {
        display: block;
        width: 100%;
    }
    
    .m-index {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    
    #mask {
        background: rgba(0, 0, 0, .8);
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2000;
        display: none;
    }
    
    .arrow {
        width: 2.625em;
        height: 5.1875em;
        background: url() no-repeat 0 0;
        position: absolute;
        right: 1.5em;
        top: 1.5em;
        background-size: 100%
    }
    
    .tips {
        text-align: center;
        /*font-size: 1.75em;*/
        font line-height: 1.85em;
        color: #fff;
        position: absolute;
        top: 5.0em;
        width: 100%
    }
    
    #android,
    #iphone,
    #ipad {
        display: none;
    }
    
    .btn {
        margin: 0px auto;
        width: 50%;
    }
    
    @media screen and (max-width:700px) {
        #iphone,
        #ipad {
            border-width: 10px;
            border-bottom: dashed;
            border-color: lightgray;
        }
    }
    
    @media screen and (min-width:720px) {
        #android,
        #iphone,
        #ipad {
            width: 33.1%;
        }
        #androidImg,
        #iphoneImg,
        #ipadImg {
            width: 100%;
            margin: 0 auto;
        }
    }
    header{
        margin-bottom: 20px;
    }
    header img {
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="m-index" id="module-root">
        <header>
            <img src="./android_01.png" alt="">
        </header>
        <article id="iphone">
            <section class="pic btn" id="iphoneBtn">
                <a href="itms://itunes.apple.com/app/zhong-guo-shi-you-guan-wang/id868622754?mt=8"><img src="./appstore_btn.png"></a>
            </section>
            <section class="pic"><img src="./iphone_02new.jpg" id="iphoneImg"></section>
        </article>
        <article id="ipad">
            <section class="pic btn" id="ipadBtn">
                <a href="itms://itunes.apple.com/us/app/zhong-guo-shi-you-guan-wanghd/id1123396222?mt=8"><img src="./appstore_btn.png"></a>
            </section>
            <section class="pic"><img src="./iPad_02new.jpg" id="ipadImg"></section>
        </article>
        <article id="android">
            <section class="pic btn" id="androidBtn">
                <a href="http://www.cnpc.com.cn/cnpc.apk"><img src="./android_btn.png"></a>
            </section>
            <section class="pic"><img src="./android_02.jpg" id="androidImg"></section>
        </article>
    </div>
    <div id="mask">
        <div class="arrow"></div>
        <div class="tips">
            <span>请点击右上角</span>
            <br/> 选择
            <span style='color:#39f;'> 在浏览器中打开 </span>
        </div>
    </div>
    <!-- <script src="http://127.0.0.1:8000/_/js/reloader.js"></script> -->
</body>
<script>
function displayType(elementID, style) {
    document.getElementById(elementID).style.display = style;
}

function is_weixin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}

(function() {
    if (is_weixin()) {
        displayType("mask", "block")
        displayType("androidBtn", "none");
        displayType("iphoneBtn", "none");
        displayType("ipadBtn", "none");
    }

    var openUrl = window.location.search;
    try {
        openUrl = openUrl.substring(1, openUrl.length);
    } catch (e) {}
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
        isAndroid = navigator.userAgent
        .match('Android'),
        isDesktop = !isiOS && !isAndroid;
    if (isiOS) {
        if (navigator.userAgent.match('iPad')) {
            console.log("ipad");
            document.getElementById("ipadImg").src = "./iPad_02new.jpg"
            displayType("ipad", "inline-block");
            document.getElementById("ipad").style.width = "100%";
            displayType("ipad", "inline-block");
            window.location = "https://itunes.apple.com/us/app/zhong-guo-shi-you-guan-wanghd/id1123396222?mt=8";
        } else {
            console.log("iphone");
            document.getElementById("iphoneImg").src = "./iphone_02new.jpg"
            displayType("iphone", "inline-block");
            window.location = "https://itunes.apple.com/app/zhong-guo-shi-you-guan-wang/id868622754?mt=8";
        }
    } else if (isAndroid) {
        console.log("android");
        document.getElementById("androidImg").src = "./android_02.jpg"
        displayType("android", "inline-block");
        window.location = "http://www.cnpc.com.cn/cnpc.apk";
    } else {
        displayType("android", "inline-block");
        displayType("ipad", "inline-block");
        displayType("iphone", "inline-block");
    }
})();
</script>

</html>
